<template>
	<div class="spu-common">
	  	<div id="edit-container" class="spu-container" v-bind:class="showEditContainerObj">
	  		<div class="transparent-bg"></div>
		    	<div class="transparent-content">
		    		<div class="header">
			    		<div class="header-img fl"><img id="header-img" :src="spuInfo.androidMainImage" /></div>
			    		<div class="header-content">
			    			<div class="header-content-title" id="header-content-title">{{spuInfo.spuName}}</div>
			    			<div class="header-content-price">
			    				
			    				<!--<span class="price-before" id="header-content-price-after">¥ <span class="price-info">{{price.cashPrice}}</span></span>-->
			    				
			    				
			    				<!-- end priceType == 1 [渠道价] [单品] -->
								<div class="sup-price" v-if="price.priceType == 1 && iscombined != 2">
									<em class="gray font12">暂不销售</em>
								</div>
								<!-- end priceType == 1 [渠道价] -->
			    				
			    				<!-- priceType == 3 [门店价], promotionPrice == true [促销价], iscombined == 2 [组合商品- -取渠道价] -->
								<div class="sup-price sup-price-c" v-else="price.priceType == 3 || iscombined == 2 || price.promotionPrice == true">
									
									<!--固定价格-->
									<div class="sup-price" v-show="spuInfo.fixedPrice == 1 ? true : false">
										<span class="yang-pic" v-if="price.cashPrice || price.cashPrice == 0">￥</span>
										<span class="yang-pic-price">
											<em class="big-price">{{{(price.cashPrice == 0 ? '0' :  price.cashPrice) | dollarPrice}}}</em>
										</span>
									</div>
									<!--end 固定价格-->
									
									<!--非固定价格-->
									<div class="sup-price" v-show="spuInfo.fixedPrice == 0 ? true : false">
										<span class="yang-pic" v-if="price.marketPrice || price.marketPrice === 0">￥</span>
										<span class="yang-pic-price">
											<em class="big-price">{{{(price.marketPrice == 0 ? '0' :  price.marketPrice) | dollarPrice}}} <span class="font12">起</span></em>
										</span>
									</div>
									<!--end 非固定价格-->
								</div>
								<!-- end priceType == 3 [门店价] -->
								
			    				
			    				<span class="price-after" v-show="price.marketPrice && (price.cashPrice < price.marketPrice)" id="header-content-price-before" >价格 ¥ {{price.marketPrice}}</span>
			    			</div>
                        </div>
			    	</div>
			    	<ul id="spuInfo" class="content-list">
			    		<li  id="ld1" v-for="(vdim,levelList) in contentList" class="h_box">
			    			<div class="spu-title">{{levelList.attrName | removeLetters }}</div>
			    			<div class="level-r">
				    			<div class="level1" v-for="(colum,level) in levelList.attrValueList"  v-bind:status="level.status" @click="changeStatus(vdim,colum)" ca="P_{{spuInfo.spuName}}${{level.attrValue}}">
				    				<span v-bind:class="{ 'cur':level.iscurrent,'disable':level.disable}">{{level.attrValue}}</span>
				    			</div>
			    			</div>
			    			
			    		</li>
			    	</ul>
			    	<div class="footer">
			    		<input id="select-btn-ok" type="button" class="btn" v-on:click="changeService" value="确定" ca="P_{{spuInfo.spuName}}$参数确定"/>
			    	</div>
		    	</div>
		</div>
		<div id="edit-mask" class="edit-mask" v-on:click="closeSpuCommon" v-bind:style="showEditMaskObj"></div>
	</div>
</template>

<script>
/*多规格选择*/
//Author : wangjingliang
//Tel : 133-7522-7905 
import common from '../../utils/common';
import {Toast} from 'mint-ui';
export default {	
  	name: 'spu-common',
  	data () {
	    return {
	    	showEditContainerObj: {
	    		'slideUp': false,//初始化显示隐藏
	    		'slideDown': true
	    	},
	    	showEditMaskObj: {
	    		display: 'none'
	    		//mask放入外层div中不用指定height高度
	    		//height: window.outerHeight+'px'
	    	},
	    	spuObj: {},
	    	titleList: [],
	    	contentList: [],
	    	serviceMap: {},
	    	spuInfo:{},
	    	selectVd:[],
	    	selectText:[],
	    	selectSkuCode:'',
	    	storeInfo:'',
	    	price:''
	    }
  	},
  	events: {
  		// 更改弹层状态
  		'spu-common-show' (e) {
  			this.showSpuCommon();
  		},
  		'spuCommonDataEvent' ( d,storeInfo) {
  		    if(!d)return;
  			this.spuInfo = d.spuInfo;
  			this.storeInfo = storeInfo||'';	  
            //console.info(this.storeInfo);			
  			this.renderSpuList(d.spuInfo.saleAttrList);
  		},
  	},
  	methods: {
  		showSpuCommon () {
	  		this.showEditContainerObj['slideUp'] = true;
	  		this.showEditContainerObj['slideDown'] = false;
	  		this.showEditMaskObj['display'] = 'block';
	  	},
	  	closeSpuCommon () {
	  		this.showEditContainerObj['slideUp'] = false;
	  		this.showEditContainerObj['slideDown'] = true;
	  		this.showEditMaskObj['display'] = 'none';
	  	},
	  	changeService () {
	  		// 返回数据 
	  		this.closeSpuCommon();


	  		// 发送到父组件
	  		if(this.spuInfo.skuAttrCodeMap[this.stringContact(this.selectVd)]){
				this.$dispatch('changeSkuCode', this.spuInfo.skuAttrCodeMap[this.stringContact(this.selectVd)]);
				this.$dispatch('changeSkuText', this.selectText,this.selectVd);
	  		}	  		
	  	},
	  	//获取价格
		getPrice (skuCode) {
			if(!this.storeInfo.provinceId)return;
			var _this = this;
			/**
			 * 详情页的促销，价格接口 
			 * 查询价格及促销信息
			 */
			var prmtQuery = JSON.stringify({
				"skuCode":this.selectSkuCode,
				'provinceCode':_this.storeInfo.provinceId,
				'cityCode':_this.storeInfo.cityId,
				'areaCode':_this.storeInfo.distId,
				'entityStore':_this.storeInfo.partnerCode
			});

			this.$http.post(common.isdev()+'/pricePrmtHandle/queryCxjMdsePricePrmt.htm', { 'prmtQuery': prmtQuery }).then(function ( d ) {
			 //debugger;
				
				var resData = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
				if ( resData.result === 1 && resData.obj) {
					this.price = resData.obj.price;
				} else if ( resData.result === 0 ) {
					Toast(resData.message);
				}
			}, function ( err ) {
				Toast(err);
			});
		},
        getProductInfo (skuCode){
                var _this = this;
                
                // 商品详情         
                // 获取维度
                var _skuCode = skuCode;
                // 存在SpuCode
                if ( _skuCode){
                    _this.$http.post( common.isdev() + '/detail/skuDetail.htm',{
                        skuCode: _skuCode
                    }).then(function ( d ) {  

                        var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
                        if ( res.result === 1 ) {
                           _this.spuInfo.androidMainImage = res.obj.skuAndroidImage;
                            _this.spuInfo.spuName = res.obj.skuName;

                        } else if( res.result === 0 ) {
                            Toast('商品详情，请求错误');                            
                        }
                    }, function( err ) {
                        Toast('请求错误');
                    });
                } else {
                    // 404
                    _this.$route.router.go({'name': 'notfile'});
                }
        },
	  	//拼接字符串
	  	stringContact (arr) {
	  		return arr.join('@');
	  	},
	  	//返回SKUCODE
	  	skuAttrCodeMap (data,str){
	  		return data[str];
	  	},
	  	//返回上下架情况
	  	skuStatusMap (data,str) {
	  		if(!str){
	  			return 0;
	  		}else{
	  			return data[str];
	  		}	  		
	  	},
        //获取 status ,selectVd 为数组 或者1111@1111@1111
        getStatus (skuStatusMap,skuAttrCodeMap,selectVd){
            return Array.isArray(selectVd)?this.skuStatusMap(skuStatusMap,this.skuAttrCodeMap(skuAttrCodeMap,this.stringContact(selectVd))):this.skuStatusMap(skuStatusMap,this.skuAttrCodeMap(skuAttrCodeMap,selectVd));

            // return this.skuStatusMap(skuStatusMap,this.skuAttrCodeMap(skuAttrCodeMap,this.stringContact(selectVd)));
        },
        getSkuCode(skuAttrCodeMap,selectVd){
            return this.spuInfo.skuAttrCodeMap[this.stringContact(selectVd)];
        },

	  	// 渲染Spu
	  	renderSpuList ( saleAttrList,skucashe) {
	  		// console.log(this.spuInfo);
			if(!saleAttrList)return;
			var _this = this;
	  		//设置初始化 选中SKU
            //console.info(JSON.parse(sessionStorage.selectVd));
    
	  		var def = skucashe||(sessionStorage.selectVd?JSON.parse(sessionStorage.selectVd):this.spuInfo.attrValue),defaul = def;
	  		//debugger;
	  		//当前选中的TEXT
            this.selectText.length = 0;
	  		for(var i=0,len=def.length;i<len;i++){
	  		 	this.selectText[i] =  this.spuInfo.attrMap[def[i]];
	  		}

	  		this.selectVd = defaul;
	  		this.contentList = saleAttrList;
	  		var item = saleAttrList,_selectVd;
	  		for(var i=0,len=saleAttrList.length;i<len;i++){

	  			var j_len = saleAttrList[i].attrValueList.length;
	  			_selectVd = this.selectVd.concat();
	  			for(var j=0;j<j_len;j++){

	  				//添加disable 属性
	  				if(i!=0){
	  					this.$set('contentList['+i+'].attrValueList['+j+'].disable', false);
	  				}else{
	  					this.$set('contentList['+i+'].attrValueList['+j+'].disable', false);
	  				}

	  				//this.$set('contentList['+i+'].attrValueList['+j+'].disable', false);
	  				

	  				//为数据列表添加iscurrent属性
	  				if(item[i].attrValueList[j].attrValueCode === defaul[i]){
	  					this.$set('contentList['+i+'].attrValueList['+j+'].iscurrent', true);
	  				}else{
	  					this.$set('contentList['+i+'].attrValueList['+j+'].iscurrent', false);
	  				}


	  				//为数据列表添加disable属性
	  				if(!item[i].attrValueList[j].iscurrent){	  					
	  					_selectVd[i] = item[i].attrValueList[j].attrValueCode;
	  					var _status = _this.getStatus(_this.spuInfo.skuStatusMap,_this.spuInfo.skuAttrCodeMap,_selectVd);
	  					if(_status != 2){
			  				if(i!=0){
			  					this.$set('contentList['+i+'].attrValueList['+j+'].disable', true);
			  				}
	  						//this.$set('contentList['+i+'].attrValueList['+j+'].disable', true);
	  					}else{

	  						this.$set('contentList['+i+'].attrValueList['+j+'].disable', false);
	  					}
	  				}
	  			}
	  		}

	  		this.selectSkuCode = this.getSkuCode(this.spuInfo.skuAttrCodeMap,this.selectVd);
	  		
	  		this.contentList = saleAttrList;
	  		this.getPrice(_this.storeInfo,this.selectSkuCode);
	  		//console.info(this.selectSkuCode);
	  		
	  	},
	  	changeStatus (vdim,colum) {

	  		var _this = this,_selectVdCopy = this.selectVd.concat();

	  		//判断当前是否是disable状态-不可选
	  		//if(this.$get('contentList['+vdim+'].attrValueList['+colum+'].disable')) return;

	  		//判断当前是否是iscurrent状态-正选中
	  		if(this.$get('contentList['+vdim+'].attrValueList['+colum+'].iscurrent')) return;

            _selectVdCopy[vdim] = this.contentList[vdim].attrValueList[colum].attrValueCode;

            // var _status = _this.getStatus(_this.spuInfo.skuStatusMap,_this.spuInfo.skuAttrCodeMap,_selectVdCopy);

            // if(_status!=2 && vdim ===0){
            //     Toast('当前标签下，无任何可选项目');
            //     return;
            // }

	  		//当前选中的text 
	  		this.selectText[vdim] = this.contentList[vdim].attrValueList[colum].attrValue;

	  		//当前选中的维度推送到选中列表中
	  		this.selectVd[vdim] = this.contentList[vdim].attrValueList[colum].attrValueCode;

	  		//去掉当前选中维度中  其他按钮上的选中状态
	  		for(var i =0,len = this.spuInfo.saleAttrList[vdim].attrValueList.length;i<len;i++){
	  			if(i != colum){
	  				this.$set('contentList["'+vdim+'"].attrValueList["'+i+'"].iscurrent', false);
	  			}	  			
	  		}

	  	
	  		//遍列 点击后的维度 可否选中
	  		var vd = this.contentList.length,
	  			j_len,
	  			_selectVd=[],
	  			attrValueList;


	  		
	  		//遍列各维度
	  		for(var i=0,len=vd;i<len;i++){

	  			// 复制选中的维度
	  			_selectVd = this.selectVd.concat();

	  			// 列长度
	  			attrValueList =	this.contentList[i].attrValueList;		
	  			j_len = attrValueList.length;

	  			// 遍列维度中的列
	  			for(var j=0,j_l=j_len;j<j_l;j++){

	  				//debugger;
	  				//如果当前不是选中状态
	  				//if(!attrValueList[j].iscurrent){


	  					_selectVd[i] = attrValueList[j].attrValueCode;
	  					var _status = _this.getStatus(_this.spuInfo.skuStatusMap,_this.spuInfo.skuAttrCodeMap,_selectVd)

	  					if(_status != 2){
                            if(i!=0){
                                this.$set('contentList['+i+'].attrValueList['+j+'].disable', true);
                            }
			  				//this.$set('contentList['+i+'].attrValueList['+j+'].disable', true);
	  					}else{
	  						this.$set('contentList['+i+'].attrValueList['+j+'].disable', false);
	  					}
	  				//}

	  			}

	  		}

            //当前选中的skucode
            this.selectSkuCode = this.getSkuCode(this.spuInfo.skuAttrCodeMap,this.selectVd);

            if(!this.selectSkuCode){
                var _k,arr=[];
                var strSelectVd = this.selectVd.slice(0,vdim+1).join('@');
                console.info(strSelectVd);
                for(var key in this.spuInfo.skuAttrCodeMap){
                    if( key.indexOf(strSelectVd) >-1 ){
                        if(_this.getStatus(_this.spuInfo.skuStatusMap,_this.spuInfo.skuAttrCodeMap,key) === 2){
                            _k = key;
                            break;         
                        }                                      
                    }
                }

                if(!_k){
                    for(var key in this.spuInfo.skuAttrCodeMap){
                        if( key.indexOf(this.selectVd[vdim]) >-1 ){
                            if(_this.getStatus(_this.spuInfo.skuStatusMap,_this.spuInfo.skuAttrCodeMap,key) === 2){
                                _k = key;
                                break;         
                            }                                      
                        }
                    }

                }



                if(_k){
                    arr = _k.split('@');
                    _this.renderSpuList(_this.spuInfo.saleAttrList,arr);
                }else{
                    return;
                }               
            }


            if(this.spuInfo.skuAttrCodeMap[this.stringContact(this.selectVd)]){
                //当前选中的添加样式
                this.$set('contentList["'+vdim+'"].attrValueList["'+colum+'"].iscurrent', true);
            }







			console.info(this.selectVd, 'this.selectVd');
	  		console.info(this.selectText, 'this.selectText');
	  		console.info('skucode:'+this.spuInfo.skuAttrCodeMap[this.stringContact(this.selectVd)] ,'skucode');
	  		console.info(this.spuInfo.androidMainImage);
	  		console.log(this.spuInfo);
	  		if(this.selectSkuCode){
				this.getPrice(_this.storeInfo,this.selectSkuCode);
                this.getProductInfo(this.selectSkuCode);
	  		}	  		
	  	}
  	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';

 .spu-container {
    font-size: rem(14);
	position: fixed;
	z-index: 100;
	bottom: 0;
	width: rem(375);
	transform: translateX(0) translateY(100%);
	-webkit-transform: translateX(0) translateY(100%);
	display:none;
	.transparent-bg {
		width: rem(375);
		height: rem(30);
	}
	.font12 {
		font-size: rem(12);
	}
	.sup-price {
		display: inline-block;
	}
	.sup-price-c {
		color:#f55923;
	}
	.transparent-content {
		background: $_fff;
	}
  	.header {
  		border-bottom: 1px solid $_eee;
	  	min-height: rem(100);
	  	.header-img {
			background: $_fff;
			position: relative;
			top: - rem(30);
			left: rem(10);
			width: rem(110);
			height: rem(110);
			overflow: hidden;
			padding: rem(6);
			box-sizing: border-box;
			border-radius: rem(6);
			img {
				background: #d8d8d8;
				width: rem(98);
				height: rem(98);
			}
		}
		.header-content {
		  	padding-top: rem(10);
		  	padding-left: rem(124);
		  	.header-content-title {
		  		font-size: rem(16);
		  		line-height: rem(24);
		  		color:$_243742;
			}
		}
		.header-content-price {
  			line-height: rem(30);
  			.price-before {
			  	font-size: rem(16);
			  	color: $_ff0000;
			  	.price-info {
			  		font-size: rem(18);
			  	}
			}
			.price-after {
  				font-size: rem(11);
  				color: $_999;
  				margin-left: rem(12);
			}
		}
	}
	ul.content-list {
		padding:rem(16) rem(20) 0;
		// margin-bottom: rem(-10);

		#ld1 {
			line-height: rem(28);
			/*//margin-bottom: rem(12);*/
            border:none;
            justify-content: flex-start; 
            
		}
		.spu-title {
			margin-right: rem(5);
			padding-right: rem(10);
			overflow: hidden;
			max-width: rem(60);
			min-width: rem(60);
			white-space:nowrap;
			box-sizing:content-box;
            font-size:rem(14);
            flex:1;
		}
		.level-r{
			flex-wrap:wrap;
			display:flex;
			justify-content: flex-start; 
			flex:2;
			-webkit-flex-wrap:wrap;
		}
		.level1 {
			margin-bottom: rem(16);
			display:inline-block;
			span{
				display:block;
				padding: 0 rem(6);
				height: rem(28);
				background: $_f4f4f4;
				text-align: center;
				line-height: rem(28);
				margin-right: rem(12);
				border-radius: rem(4);
				white-space: nowrap;
			}
			span.cur{
				background:$blue-new;
				color: $_fff;
			}
			span.disable{
				background:#f4f4f4;
				color:#ccc;
			}
			&:last-child{
				span{
					// padding:0 rem(10);
                    margin-right:0
				}
			}	
		}
	}
	.footer {	
        border-top:1px solid $_eee;
        margin:0 rem(20) 0;
        padding:rem(14) 0 rem(20);
	  	.btn {
	 	 	width: 100%;
		  	height: rem(45);
		  	background: $_ff6600;
		  	font-size: rem(18);
		  	text-align: center;
		  	letter-spacing: rem(7.5);
		  	color: #ffffff;
		  	border-radius: 0;
		  	border: none;
            border-radius:rem(5);
		}
	  	
	}
}
 .edit-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
}
 .slideUp {
 	display: block;
  animation: slideUp 400ms ease-in forwards;
  -webkit-animation: slideUp 400ms ease-in forwards;
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
  100% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
}
 .slideDown {
  animation: slideDown 400ms ease-in forwards;
  -webkit-animation: slideDown 400ms ease-in forwards;
}
@-webkit-keyframes slideDown {
  0% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
}

</style>
